<template>
	<view>
		<!-- 大陆 -->

		<view class="bgWhite plr15 ft15">

			<view class="align-center bdbe">
				<view class="txt">{{$t('mine').真实姓名}}</view>
				<input @blur="saveInfo()" v-model="bankInfo.username" type="text" class="flex1 h50" disabled
					:placeholder="$t('mine').输入您的真实姓名" placeholder-class="placeholderStyle" />
			</view>
			<view class="align-center">
				<view class="txt">{{$t('mine').身份证号}}</view>
				<input @blur="saveInfo()" v-model="bankInfo.id_num" type="text" class="flex1 h50" disabled
					:placeholder="$t('mine').输入有效身份证号" placeholder-class="placeholderStyle" />
			</view>
		</view>

		<view class="bgWhite plr15 ft15 mt10">

			<view class="">
				<view class="txt1">
					<view class="mr5">{{$t('mine').上传的身份证信息须和实名信息一致}}</view>
					<image src="../../static/images/wallet/gantanhao.png" mode="" class="icon1" @click="is_show3=true">
					</image>
				</view>
				<view class="box1 mt5">
					<view class="bg1">
						<image :src="bankInfo.front_img||'../../static/images/wallet/renxiangmian.png'" mode=""
							class="img1" @click="chooseImage(1,1)"></image>
						<view class="bg2" v-show="bankInfo.front_img" @click="delPic(1)">
							<image src="../../static/images/wallet/delete1.png" mode="" class="img2"></image>
						</view>
					</view>
					<view class="bg1">
						<image :src="bankInfo.back_img||'../../static/images/wallet/guohuimian.png'" mode=""
							class="img1" @click="chooseImage(2,1)"></image>
						<view class="bg2" v-show="bankInfo.back_img" @click="delPic(2)">
							<image src="../../static/images/wallet/delete1.png" mode="" class="img2"></image>
						</view>
					</view>
				</view>
				<view class="box1 text-center tc">
					<view class="txt2">{{$t('mine').身份证人像面}}</view>
					<view class="txt2">{{$t('mine').身份证国徽面}}</view>
				</view>
			</view>

		</view>
		<mix-button ref="confirmBtn" :text="$t('mine').提交" marginTop="55rpx" @onConfirm="submit"></mix-button>


		<!-- 身份证上传要求弹窗 -->
		<u-overlay :show="is_show3" @click="is_show3 = false" opacity=".4">
			<view class="t-box">
				<view class="txt3" style="" @tap.stop>
					<view class="titl1">{{$t('mine').身份证上传要求}}</view>
					<view class="main">{{$t('mine').身份证上传要求内容}}</view>
					<image src="../../static/images/wallet/show-right.png" mode="" class="img1"></image>
					<view class="bu-konw" @click="know()">
						{{$t('mine').我知道了}}
					</view>

				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				is_show1: false, //第一个删除按钮显示、隐藏
				is_show2: false, //第二个删除按钮显示、隐藏
				is_show3: false, //上传身份证要求弹窗显示、隐藏
				bankInfo: {},
				username: '',
				id_num: ''

			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		onLoad() {
			this.getbankAPI()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('mine').上传身份证
			})
			// this.id_num = this.userInfo.id_num
			// this.brank_name = this.userInfo.brank_name
			// this.brank_num = this.userInfo.brank_num
			// this.brank_phone = this.userInfo.phone
			// console.log(this.userInfo.sign_status,this.sign_status)	
			this.$store.dispatch('getuserInfo')
		},
		methods: {
			// 删除图片
			delPic(type){
				if (type == 1) {
					this.bankInfo.front_img = ''
				} else{
					this.bankInfo.back_img = ''
				}
				this.saveInfo()
			},
			randNum(min, max) {
				return Math.floor(Math.random() * (max - min)) + min + Date.now();
			},
			// 新增图片
			chooseImage(type, country) {
				// let count = 9 - this.imageList.length;
				uni.chooseImage({
					count: 1,
					success: async (chooseImageRes) => {
						setTimeout(()=>{
							uni.showLoading({
								title: this.$t('mine').正在上传
							})
						},0)
						const tempFiles = chooseImageRes.tempFiles;
						let newData = {
							url:chooseImageRes.tempFilePaths[0],
							size: chooseImageRes.tempFiles[0].size
						}
						let resSize = newData.size;
						// let resSize = newData.size;
						if (resSize > 1024 * 1024* 7) {
							return setTimeout(()=>{
								uni.hideLoading()
								this.$utils.msg(this.$t('mine').上传图片大小不能超过7MB)
							},1)
						}else if (resSize > 1024 * 1024* 2) {
							newData = await this.$utils.imageCompress(chooseImageRes.tempFilePaths[0])
							resSize = newData.size;
						}
						let pixel =''
						if (resSize > 1024 * 1024) {
							pixel = 100
						}
						let key;
						// #ifdef MP-WEIXIN  
						key = '.' + chooseImageRes.tempFiles[0].path.toLowerCase().split('.')[1];
						// #endif
						// #ifdef H5
						key = chooseImageRes.tempFiles[0].name;
						// #endif
						this.$api.qiniuToken().then((res) => {
							let uploadMsg = res.data;
							for (var i = 0; i < chooseImageRes.tempFiles.length; i++) {
								let uniqueCode = this.randNum(100, 5);
								let formData = {
									'key': 'userfile/' + uniqueCode + key,
									'token': uploadMsg.token
								}
								let options = {
									filePath: newData.url,
									name: 'file',
									formData: formData,
								}
								this.$api.uploadImg(options,pixel).then(async (res) => {
									let partImgUrl = uploadMsg.url + '/' + res;
									let _this = this
									if (type == 1) {
										if (country == 1) {

											const sfrespon = await this.$api.chuangLanOcr({
												imageType: 'URL',
												image: partImgUrl,
												ocrType: 0,
												detectRisk: true
											})
											if (sfrespon && sfrespon.code == 1) {
												let sfres = sfrespon.data
												if (sfres.code == 200000 &&
													sfres
													.data.imageStatus ==
													'normal'
												) {
													if (_this.bankInfo
														.username != sfres
														.data.name || _this.bankInfo
														.id_num.toUpperCase() != sfres.data.cardNum.toUpperCase()) {
														_this.$utils.msg(this
															.$t(
																'mine')
															.信息错误 + _this.bankInfo
															.username + this
															.$t(
																'mine')
															.的身份证)
														return
													}
													_this.bankInfo.front_img =
														partImgUrl
													_this.bankInfo.username =
														sfres.data
														.name
													_this.bankInfo.id_num =
														sfres.data
														.cardNum

												} else {
													_this.$utils.msg(this.$t(
														'mine')['识别失败'+sfres.data.imageStatus])
												}
												uni.hideLoading()
											} else {
											uni.hideLoading()
												_this.$utils.msg(this.$t(
													'mine').识别失败)
											}
										} else {

										}
									} else {
										const sfrespon = await this.$api.chuangLanOcr({
											imageType: 'URL',
											image: partImgUrl,
											ocrType: 1,
											detectRisk: true
										})
										if (sfrespon && sfrespon.code == 1) {
											let sfres = sfrespon.data
											if (sfres.code == 200000 &&
												sfres
												.data.imageStatus ==
												'normal'
											) {
												_this.bankInfo.back_img =
													partImgUrl

											} else {
												_this.$utils.msg(this.$t(
													'mine')['识别失败'+sfres.data.imageStatus])
											}
											uni.hideLoading()
										} else {
											uni.hideLoading()
											_this.$utils.msg(this.$t(
												'mine').识别失败)
										}
									}
								})
							}
						})

					},
					fail(err) {
						console.log("err" + err)
					},
				});
			},
			know() {
				this.is_show3 = false
			},
			// 获取回显的银行卡信息
			async getbankAPI(type) {
				const res = await this.$api.getbank()
				if (res && res.code == 1) {
					this.bankInfo = res.data
				}
			},
			// 保存填写的信息
			saveInfo() {
				uni.setStorageSync('bingCardInfo', this.bankInfo)
			},
			//提交
			async submit() {
				if (!this.bankInfo.back_img) {
					return this.$utils.msg(this.$t('mine').请上传证件背面图)
				}
				if (!this.bankInfo.front_img) {
					return this.$utils.msg(this.$t('mine').请上传证件正面图)
				}
				const res = await this.$api.setBankImgs(this.bankInfo)
				if (res && res.code == 1) {
					this.$utils.msg(this.$t('mine').校验通过)
					setTimeout(() => {
						uni.reLaunch({
							url: `/pages/wallet/withdraw`
						})
					}, 1000)
				} else {
					this.$utils.msg(this.$t('mine').校验失败)
				}
			}

		}
	}
</script>

<style lang="scss">
	.placeholderStyle {
		font-size: 30upx !important;
	}

	.tip {
		background-color: rgba(242, 60, 75, 0.1);
	}

	.txt {
		width: 170upx
	}

	.txt1 {
		width: 100%;
		height: 100upx;
		// line-height: 100upx;
		display: flex;
		justify-content: start;
		align-items: center;

		.icon1 {
			width: 26upx;
			height: 26upx;
			margin-top: -4upx;
		}
	}

	.box1 {
		display: flex;
		justify-content: space-between;

		.bg1 {
			width: 308upx;
			height: 191upx;
			background-image: url("../../static/images/wallet/kuang.png");
			background-size: 308upx 191upx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.img1 {
				width: 274upx;
				height: 157upx;
			}

			.bg2 {
				background-color: #ffffff;
				border-radius: 50%;
				width: 32upx;
				height: 32upx;
				position: absolute;
				right: 26upx;
				top: 26upx;
			}

			.img2 {
				width: 32upx;
				height: 32upx;
			}
		}

	}

	.txt2 {
		width: 308upx;
		height: 100upx;
		line-height: 100upx;
		font-size: 26upx;
	}

	.t-box {
		height: 100vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;

		.txt3 {
			width: 674upx;
			// height: 512upx;
			background-color: #ffffff;
			margin-top: -260upx;
			padding: 45upx 42upx;
			border-radius: 30upx;

			.titl1 {
				font-size: 32upx;
				// line-height: 60upx;
			}

			.main {
				margin-top: 10upx;
				font-size: 24upx;
				color: #666666;
				letter-spacing: 2upx;
				line-height: 40upx;
			}

			.img1 {
				width: 590upx;
				height: 128upx;
				margin-top: 38upx;
			}

			.bu-konw {
				margin: 0 auto;
				width: 420upx;
				height: 90upx;
				border-radius: 50upx;
				border: 2upx solid #F44A42;
				text-align: center;
				line-height: 86upx;
				margin-top: 42upx;
				font-size: 32upx;
				color: #F44A42;
			}
		}

	}
</style>